<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style lang="">

            *{
                box-sizing: border-box;
            }
            a{
                text-decoration: none;
                color: black;
            }
            ul{
                margin: 0;
                padding: 0;
                list-style: none;
            }

            #container{
                width: 1200px;
                margin: 0 auto
            }

            .language{
                margin: 10px 0 15px;
                text-align: right;
            }
            .language a{
                font-size: 13px;
                margin-left: 20px;
            }
            .language a:hover{
                text-decoration: underline;
                color: #006ad0;
            }
            .nav::after{
                content: "";
                display: block;
                clear: both;
            }
            .nav li{
                float: left;
                margin-right: 30px;
                border-bottom: 2px solid transparent;
                transition: all 0.5s 0.5s;
            }
            .nav li .logo{
                display: block;
            }
            .nav li.IWant a{
                padding: 0 25px;
                border-radius: 5px;
                background-color: #ddd;
            }
            .nav li a{
                display: block;
                height: 40px;
                line-height: 40px;
                margin-bottom: 2px;
            }
            .nav li:not(.logo):hover{
                border-color:red;
                transition-delay: 0s;
            }
            .nav li.IWant:hover a{
                background-color: red;
                color: white;
            }
            .nav li:hover a{
                color: red;
            }

            .banner{
                margin: 10px 0;
            }
            .banner img{
                width: 100%;
            }

            .main{
                margin: 20px 0;
            }
            .main::after{
                content: "";
                display: block;
                clear: both;
            }
            .main > div{
                width: 50%;
                float: left;
            }
            .main > div:nth-child(2n+1) .item-box{
                margin-right: 10px;
            }
            .main > div:nth-child(2n) .item-box{
                margin-left: 10px;
            }
            .main > div:nth-child(2) .item-box > div:nth-child(1){
                margin-bottom: 18px;
            }
            .main > div:nth-child(2) .item-box > div:nth-child(2){
                margin-bottom: 18px;
            }
            .item-box img{
                display: block;
                width: 105%;
                transition: all 0.5s;
            }
            .item{
                position: relative;
                overflow: hidden;
            }
            .item::after{
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background-color: black;
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                transition: all 0.5s;
            }
            .item h2,.item p{
                position: absolute;
                color: white;
                left: 50px;
                z-index: 10;
                transition: all 0.5s;
            }
            .item h2{
                font-size: 30px;
                bottom: 80px; 
            }
            .item h2.reflect{
                bottom: 40px;
                /* 文字倒影 */
                /* -webkit-box-reflect: below 8px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, rgba(3,3,3,.2)), to(rgba(3,3,3,.2))); */
                -webkit-transform: scaleY(-1); /* webkit内核浏览器的实现，例如safari */ 
                -moz-transform: scaleY(-1); /* firefox 的实现 */ 
                -ms-transform: scaleY(-1); /* IE 的实现 */ 
                -o-transform: scaleY(-1); /* Opera的实现 */
                opacity:0.5; 
                filter:alpha(opacity='50');  
            }
            .overlay{
                position: absolute;width:100%;height:180px;bottom:0px; 
                z-index: 20;
                background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%); 
                background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%); 
                background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0))); 
                filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
            } 
            .item p{
                font-size: 15px;
                bottom: -100px;
                width: 80%;
            }
            
            .item:hover::after{
               opacity: 0.4;
            }
            .item:hover img{
                transform: translate(-5%,0);
            }
            .item:hover h2{
                bottom: 130px;
            }
            .item:hover h2.reflect{
                bottom: 90px;
            }
            .item:hover .overlay{
                height: 230px;
            }
            .item:hover p{
                bottom: 10px;
                z-index: 30;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <!-- 导航 -->
            <div>
                <div class="language">
                    <a href="">选择区域/语言</a>
                    <a href="">登录</a>
                    <a href="">注册</a>
                </div>
                <div class="nav">
                    <ul>
                        <li class="logo"><img src="./images/logo.png" alt=""></li>
                        <li class="IWant"><a href="">我想...</a></li>
                        <li><a href="">个人及家用产品</a></li>
                        <li><a href="">商用解决方案</a></li>
                        <li><a href="">行业话题</a></li>
                        <li><a href="">技术支持</a></li>
                        <li><a href="">合作伙伴</a></li>
                        <li><a href="">开发者</a></li>
                        <li><a href="">华为商城</a></li>
                    </ul>
                </div>
            </div>
            <!-- 横幅 -->
            <div class="banner">
                <img src="./images/bg.jpg" alt="">
            </div>
            <!-- 图片动画 -->
            <div class="main">
                <div>
                    <div class="item-box item">
                        <img src="./images/pic1.jpg" alt="">
                        <h2 class="no-reflect">迎接未来世界的正确姿势</h2>
                        <h2 class="reflect">迎接未来世界的正确姿势</h2>
                        <div class="overlay"></div> 
                        <p>人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。</p>
                    </div>
                </div>
                <div>
                    <div class="item-box">
                        <div class="item">
                            <img src="./images/pic2.jpg" alt="">
                            <h2 class="no-reflect">迎接未来世界的正确姿势</h2>
                            <h2 class="reflect">迎接未来世界的正确姿势</h2>
                            <div class="overlay"></div> 
                            <p>人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。</p>
                        </div>
                        <div class="item">
                            <img src="./images/pic3.jpg" alt="">
                            <h2 class="no-reflect">迎接未来世界的正确姿势</h2>
                            <h2 class="reflect">迎接未来世界的正确姿势</h2>
                            <div class="overlay"></div> 
                            <p>人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="item-box item">
                        <img src="./images/pic4.jpg" alt="">
                        <h2 class="no-reflect">迎接未来世界的正确姿势</h2>
                        <h2 class="reflect">迎接未来世界的正确姿势</h2>
                        <div class="overlay"></div> 
                        <p>人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。</p>
                    </div>
                </div>
                <div>
                    <div class="item-box item">
                        <img src="./images/pic5.jpg" alt="">
                        <h2 class="no-reflect">迎接未来世界的正确姿势</h2>
                        <h2 class="reflect">迎接未来世界的正确姿势</h2>
                        <div class="overlay"></div> 
                        <p>人工智能应用于医疗、金融、制造、能源、教育等垂直行业，必将与重大的社会经济变革、教育变革、思想变革、文化变革等同步，成为下一次工业革命的核心驱动力。</p>
                    </div>
                </div>
            </div>
            <!-- 横幅 -->
            <div class="banner">
                <img src="./images/bg2.jpg" alt="">
            </div>
            <!-- 新闻 -->
            <div>
                <a href="">新闻</a>
                <ul>
                    <li>
                        <a href="">杜伊斯堡市和华为签署合作备忘录 携手打造智慧城市 </a>
                        <div>2018-01-12</div>
                    </li>
                    <li>
                        <a href="">杜伊斯堡市和华为签署合作备忘录 携手打造智慧城市 </a>
                        <div>2018-01-12</div>
                    </li>
                    <li>
                        <a href="">杜伊斯堡市和华为签署合作备忘录 携手打造智慧城市 </a>
                        <div>2018-01-12</div>
                    </li>
                    <li>
                        <a href="">杜伊斯堡市和华为签署合作备忘录 携手打造智慧城市 </a>
                        <div>2018-01-12</div>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>